<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { LogPage } from '@/api/LogApi';

  const columns = [
    {
      title: '访问地址',
      dataIndex: 'path',
      slotName: 'path',
    },

    {
      title: '请求方式',
      dataIndex: 'method',
      slotName: 'method',
    },

    {
      title: '请求参数',
      dataIndex: 'body',
      slotName: 'body',
    },

    {
      title: '路由请求',
      dataIndex: 'queryString',
      slotName: 'queryString',
    },
    {
      title: '发起时间',
      dataIndex: 'createTime',
      slotName: 'createTime',
    },

    {
      title: '操作人',
      dataIndex: 'userName',
      slotName: 'userName',
    },
  ];
  const response = ref([]);
  const visible = ref(false);
  const pagination = reactive({
    current: 0,
    pageSize: 10,
    total: 0,
  });
  const queryRequest = ref({
    path: null,

    method: null,

    body: null,

    queryString: null,

    userId: null,
  });
  const search = async () => {
    console.log('search');

    const { data } = await LogPage(queryRequest.value, {
      pageSize: 10,
      current: 0,
    });
    response.value = data.records;
    pagination.total = data.total;
    pagination.current = data.current;
    console.log(data);
  };

  const onPageChange = async (current: number) => {
    pagination.current = current;
    const param = {
      pageSize: pagination.pageSize,
      current,
    };
    const { data } = await LogPage(queryRequest.value, param);
    response.value = data.records;
  };

  const fetchData = async () => {
    const { data } = await LogPage(queryRequest.value, pagination);
    response.value = data.records;
    pagination.total = data.total;
    pagination.current = data.current;
    console.log(data);
  };
  const reset = async () => {
    console.log('reset');
    queryRequest.value = {};
    const { data } = await LogPage(queryRequest.value, {
      current: 0,
      pageSize: 10,
    });
    response.value = data.records;
    pagination.total = data.total;
  };

  onMounted(async () => {
    await fetchData();
  });
</script>

<template>
  <div>
    <div class="container">
      <a-card class="general-card" title="管理">
        <a-row>
          <a-col :flex="1">
            <a-form
              :label-col-props="{ span: 6 }"
              :model="queryRequest"
              :wrapper-col-props="{ span: 18 }"
              label-align="left"
            >
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item field="path" label="访问地址">
                    <a-input
                      v-model="queryRequest.path"
                      placeholder="请输入访问地址"
                    >
                    </a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item field="method" label="请求方式">
                    <a-select
                      v-model="queryRequest.method"
                      :style="{ width: '320px' }"
                      placeholder="请选择请求方式"
                    >
                      <a-option>GET</a-option>
                      <a-option>POST</a-option>
                      <a-option>DELETE</a-option>
                      <a-option>PUT</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item field="body" label="请求参数">
                    <a-input
                      v-model="queryRequest.body"
                      placeholder="请输入请求参数"
                    >
                    </a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item field="queryString" label="请求参数">
                    <a-input
                      v-model="queryRequest.queryString"
                      placeholder="请输入请求参数"
                    >
                    </a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item field="userId" label="用户id">
                    <a-input
                      v-model="queryRequest.userId"
                      placeholder="请输入用户id"
                    >
                    </a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider direction="vertical" style="height: 84px" />
          <a-col :flex="'86px'" style="text-align: right">
            <a-space :size="18" direction="vertical">
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                查询
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>

        <a-card>
          <a-button type="primary" @click="visible = true">
            <template #icon>
              <icon-plus />
            </template>
            新增
          </a-button>
          <a-table
            :columns="columns"
            :data="response"
            :pagination="pagination"
            @page-change="onPageChange"
          >
          </a-table>
        </a-card>
      </a-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 20px 20px 20px;
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
